<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>珠城·北海</title>
	<link rel="stylesheet" href="css/iconfont/iconfont.css">
	<link rel="stylesheet" href="css/ accordion.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/index.css">
</head>




<body>
	<!-- 头部导航条 -->
	<div class="header" id="header-bar" style="display:none;">
		<span class="active"> <a href="index.html"> 首页</a></span>
		<span><a href="island.html">涠洲岛</a></span>
		<span><a href="beach.html">天下第一滩</a></span>
		<span><a href="oldstreet.html">老街风光</a></span>
		<span><a href="dock.html"></a>侨港·风情</a></span>
		<span><a href="about.html">关于我们</a></span>
	</div>
	<!-- 导航条结束 -->
	<!-- 欢迎标语 -->
	<div class="introduce">
		<h1>This is BeiHai</h1>
		<p>Welcome to travel and have a fantastic vacation!</p>
		<a type="button" id="top-btn" href="#go-index"> <i class="iconfont">&#xe66e;</i></a>
		<a type="button" id="fade-btn" style="display:none;">
			<i class="iconfont"></i>
		</a>
	</div>
	<!-- 标语结束 -->
	<!-- 占位 -->
	<!-- <div class="fade-box"></div> -->
	<!-- 占位结束 -->
	<!-- 卡片展示墙 -->
	<div class="card-wrapper" id="go-index">
		<div class="wrapper">
			<ul class="wrapUl">
				<li>
					<div class="title">
						<h1>温泉酒店</h1>
					</div>
					<div class="picBox picBox1"></div>
				</li>
				<li>
					<div class="title">
						<h1>情侣酒店</h1>
					</div>
					<div class="picBox picBox2"></div>
				</li>
				<li>
					<div class="title">
						<h1>设计师酒店</h1>
					</div>
					<div class="picBox picBox3"></div>
				</li>
				<li>
					<div class="title">
						<h1>青年旅店</h1>
					</div>
					<div class="picBox picBox4"></div>
				</li>
				<li>
					<div class="title">
						<h1>民宿客栈</h1>
					</div>
					<div class="picBox picBox5"></div>
				</li>
				<li>
					<div class="title">
						<h1>海岛酒店</h1>
					</div>
					<div class="picBox picBox6"></div>
				</li>
			</ul>
		</div>
	</div>
	<!-- 展示墙结束 -->
	<!-- 特色美食 -->
	<div class="hotlist">
		<h3>特色美食</h3>
		<div class="list-item">
			<div class="item">
				<img src="images/oyster.jpg" alt="">
			</div>
			<div class="item">
				<img src="images/roll.jpg" alt="">
			</div>
			<div class="item">
				<img src="images/cutlets.jpg" alt="">
			</div>
			<div class="item">
				<img src="images/sweet.jpg" alt="">
			</div>
		</div>
	</div>
	<!-- 美食结束 -->
	<!-- 便捷交通 -->
	<div class="traffic">
		<h3>便捷交通</h3>
		<div class="list-item">
			<div class="item">
				<img src="images/bike.jpg" alt="">
				<div class="mask" style="display:none">共享单车</div>
			</div>
			<div class="item">
				<img src="images/ele-car.jpg" alt="">
				<div class="mask" style="display:none">电动车</div>
			</div>
			<div class="item">
				<img src="images/car.jpg" alt="">
				<div class="mask" style="display:none">自驾游</div>
			</div>
			<div class="item">
				<img src="images/walk.jpg" alt="">
				<div class="mask" style="display:none">步行</div>
			</div>
		</div>
	</div>
	<!-- 交通结束 -->

	<!-- 页脚 -->
	<div class="footer">
		<div class="fast-item">
			<dl>
				<a href="index.html">
					<dt class="active">首页</dt>
				</a>
			</dl>
			<dl>
				<a href="island.html">
					<dt>涠洲岛</dt>
				</a>
			</dl>
			<dl>
				<a href="beach.html">
					<dt>天下第一滩</dt>
				</a>
			</dl>
			<dl>
				<a href="oldstreet.html">
					<dt>老街风光</dt>
				</a>
			</dl>
			<dl>
				<a href="dock.html">
					<dt>侨港·风情</dt>
				</a>
			</dl>
			<dl>
				<a href="about.html">
					<dt>关于</dt>
				</a>
			</dl>
		</div>

		<div class="copyright">
			<span>Copyright &copy 2019, chmee.cn</span>
			<span>All Rights Reserved</span>
		</div>
	</div>
	<!-- 页脚结束 -->
	<!-- 背景 -->
	<div class="bg fixed"></div>
	<!-- 背景结束 -->
	<!-- 回到顶部 -->
	<a id="go-top" type="button" href="#go-index" style="display: none;"><i class="iconfont">&#xe6b1;</i></a>
</body>

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ accordion.js"></script>
<script src="js/index.js"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8">
</script>

</html>